// 拖拽功能
class Draw{
  _drag = null
  _block = null
  // _moved = 2
  init(){
    this.on('onRendered', this._initDrawEvent.bind(this))
  }

  _initDrawEvent(){
    this.el && (this.el.onmousedown = this._mousedown.bind(this))
  }
  _mousedown( e ){
    console.log('down...')
    // this._moved--
    // if( this._moved> 0) return
    const edata = {
      e: e,
      start: {
        e: e,
        x:e.clientX, 
        y:e.clientY
      },
      target: this
    }
    this.emit && this.emitAll( 'drag-mousedown' , edata )
    window.onmousemove = ( e )=>{
      edata.e = e
      this.emit && this.emitAll( 'drag-mousemove' , edata )
    }
    window.onmouseup = ( e )=> {
      edata.e = e
      window.onmousemove = null
      window.onmouseup = null
      this.emit && this.emitAll( 'drag-mouseup' , edata )
    }
  }

  _mousedown_old( e ){
    const that = this
    const dv = this.el

    const block = this._block ? this : this.createMoveEl()
    this._block = block
    block._drag = {
      e: e,
      tg: block,
      start: {
        x:e.clientX, 
        y:e.clientY, 
        l:dv.offsetLeft, 
        t:dv.offsetTop
      },
      blk: block,
      el: block.el
    }

    // this._drag.el.style.width = e.pageX + 'px'
    // this._drag.el.style.height = dv.offsetHeight + 'px'    
    block._drag.el.style.position ='fixed'
    block._drag.el.style.left = e.pageX + 'px'
    block._drag.el.style.top =  e.pageY + 'px'

    block.appendBody();
    // document?.body.append( this._drag.el )    //设置样式    
    block.el && (block.el.style.cursor = 'move');

    window.onmousemove = this._mousemove.bind(this)
    //鼠标抬起事件
    window.onmouseup = ( e )=> {
      this.emit && block._drag && block.emit( 'drag-mouseup' , {
        e: e,
        dr: block._drag
      })
      dv.style.cursor = 'default';
      // $(that._drag.el).remove()
      window.onmousemove = null
      block._drag = null
      // window.onmouseup = null
      // this.el.onmousedown = null
    }
  }

  _mousemove_old( e ){
    //获取x和y
    const nx = e.clientX;
    const ny = e.clientY;
    const drag = this._block._drag
    const cel = drag.el

    cel.style.left = nx + 'px'
    cel.style.top = ny + 'px'

    this._block.emit && this._block.emit( 'drag-mousemove' , {
      e: e,
      dr: this._block._drag
    })
  }
}

export default Draw